<template>
  <div class="container1">
    <div class="loginBox">
      <div class="img"><img src="@/assets/logo.png" alt="" /></div>
      <form>
        用户名：
        <el-input type="text" placeholder="账号" v-model="loginForm.account" />
        <br />
        密 &nbsp;&nbsp;码：
        <el-input type="text" placeholder="密码" v-model="loginForm.password" />

        <el-button type="primary" :loading="isLoading" @click="loginConfirm">登录
        </el-button>
      </form>

      <div class="about-login">
        <a href="#">忘记密码</a>
        <router-link to="/register">没有账号？去注册</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        account: "zhangsan",
        password: "123456",
      },
      isLoading: false,
    };
  },
  methods: {
    async loginConfirm() {
      this.isLoading = true;
      let { data } = await this.$api.userApi.login(this.loginForm);
      console.log(data);
      setTimeout(() => {
        if (data.code !== 200) {
          this.$message.error(data.msg)
          this.isLoading = false;
          return
        }
        localStorage.setItem("token", data.token);
        this.$message.success(data.msg);
        this.$router.push("/index");
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 75%;
}
.container1 {
  width: 100vw;
  height: 100vh;
  background-color: #ddab8a;
  // background: url(../assets/img/login/bgcolor.jpg) no-repeat;
}
.loginBox {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  width: 390px;
  height: 480px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  background-color: #fff;
  overflow: hidden;
  .img {
    text-align: center;
  }
  form {
    width: 330px;
    margin: 0 auto;
    > div {
      margin-bottom: 20px;
    }
    .input-login {
      width: 330px;
      height: 50px;
      padding-left: 30px;
      font-size: 16px;
    }
    button {
      width: 330px;
      height: 50px;
    }
  }
  .about-login {
    margin: 30px auto 0;
    width: 330px;
    display: flex;
    justify-content: space-between;
    a {
      color: #999;
    }
  }
}
</style>
